<template>
    <div>
        <!--导航-->
        <div class="rotation-tab1">
            <ul>
                <li v-for="(item,index) in tablist" :key="index" @click="torouter(item.to)">{{item.name}}
                    <span class="iconfont icon-xiangshang" v-if="index==2"></span>
                </li>
                
            </ul>
        </div>
        <div class="about">
           <img :src="headImg" alt="">
           <div>关于MAXSOO</div>
        </div>
        <div class="cent" v-html="content"></div>
    </div>
</template>

<script>
import {findOne}from "@/common/request.js"
export default {
    data() {
        return {
            tablist:[
            {
                name:'首页',
                to: '/'
            },
            {
                name:'MAXSOO线上旗舰店',
                to: '/flagshipstore'
            },
            {
                name:'关于我们',
                to: '/about'
            },
            {
                name:'合作伙伴',
                to: '/partners'
            },
            {
                name:'SHOWROOM',
                to: '/showroom'
            }],
            content:'',
            headImg:''

        }
    },
    created() {
        findOne({
            articleId: 7
        }).then(res=>{
            let code = res.data.code
            if(code==0) {
                this.content = res.data.result.content
                this.headImg = res.data.result.headImg
            }
        })
    },
    methods: {
        torouter(page) {
            this.$router.push({
                path: page
            })
        }
    },
}
</script>

<style lang="scss">

.rotation-tab1 {
    width: 100%;
    >ul {
        overflow: hidden;
        width: 640px;
        position: absolute;
        top: 78px;
        left: 50%;
        margin-left: -320px;
        z-index: 4;
        >li {
            float: left;
            font-size: 14px;
            color: #fff;
            line-height: 40px;
            margin: 0 25px;
            cursor: pointer;
            position: relative;
            >span {
                font-size: 14px;
                position: absolute;
                bottom: -16px;
                left: 50%;
                margin-left: -7px;
            }
        }
    }
}
.about {
    width: 100%;
    height: 501px;
    background: #ccc;
    position: relative;
    >img {
        width: 100%;
        height: 100%;
    }
    >div {
        width: 398px;
        height: 162px;
        color: #fff;
        left: 521px;
        background-color: rgba(145, 145, 145, 1);
        font-size: 48px;
        line-height: 162px;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -200px;
    }
}
.cent {
    padding:149px 0 247px 0;
    >div {
        width: 1000px;
        font-size: 16px;
        color: #101010;
        line-height: 30px;
        text-align: left;
    }
}
</style>